<template>
  <div class="i-radio-group">
    <InputLabel v-if="label" :text="label" :required="required" :backStage="backStage" />
    <RadioGroup v-bind="$attrs" v-on="$listeners">
      <Radio
        size="large"
        v-for="item in radioList"
        :key="item.value + new Date()"
        :label="item.value"
        :disabled="item.disabled || disabled"
      >
        <span :title="showTitle ? item.label : ''">{{ item.label }}</span>
      </Radio>
    </RadioGroup>
  </div>
</template>

<script>
import InputLabel from "./InputLabel"; // 标签组件
// @group iview
export default {
  name: "IviewRadioGroup",
  components: {
    InputLabel,
  },
  props: {
    /**
     * 使用RadioGroup实现一组互斥的选项组
     * 格式 {label: label, value: value}
     * 某个选项需要禁选，可以传入disabled，{label: label, value: value, disabled: true}
     */
    radioList: {
      type: Array,
      require: true,
      default: () => [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
    },
    // 后台样式
    backStage: {
      type: Boolean,
    },
    // 输入框标签，不传时没有标签
    label: {
      type: String,
    },
    // 是否必填，传入label时才有效
    required: {
      type: Boolean,
    },
    // 禁用
    disabled: {
      type: Boolean,
    },
    // 显示悬浮标题
    showTitle: {
      type: Boolean,
    },
  },
};
</script>

<style lang="less" scoped>
@import "./config/input";
.i-radio-group {
  display: inline-block;
  // background: #0a1c35;
  /deep/.ivu-radio-group {
    color: @text-color;
    .ivu-radio-wrapper.ivu-radio-group-item {
      &:hover {
        .ivu-radio {
          .ivu-radio-inner {
            .border(@main-color);
          }
        }
      }
      .ivu-radio {
        .ivu-radio-inner {
          width: 20px;
          height: 20px;
          border: 1px solid #979797;
          background: #585f5f;
          &::after {
          }
        }
      }
      &.ivu-radio-wrapper-checked {
        .ivu-radio {
          .ivu-radio-inner {
            border-color: @main-color;
            box-shadow: 0px 0px 6px 0px rgba(133, 247, 220, 0.3),
              0px 0px 8px 0px rgba(0, 0, 0, 0.48);
            &::after {
              width: 10px;
              height: 10px;
              left: 4px;
              top: 4px;
              .bg(@main-color);
            }
          }
        }
      }
      &.ivu-radio-wrapper-disabled {
        opacity: 0.5;
        // color: fade(@text-color, 20%);
        .ivu-radio {
          .ivu-radio-inner {
          }
        }
      }
    }
  }
}
</style>
